<template>
    <view>
        <view class="alldiv">
            <!-- 这个是返回 -->
            <view class="navdiv">
                <u-navbar back-text="返回" @leftClick="navigateBack" :leftText="language.BecomingaHitchhiker.nav"></u-navbar>
            </view>
            <view class="boxdiv">
                <u-cell-group>
                    <u-cell center>
                        <view slot="title" style="font-size: 16px; font-weight: bold; color: rgba(56, 56, 56, 1)">{{ language.BecomingaHitchhiker.title }}</view>
                        <view slot="label">
                            <u--form labelPosition="left">
                                <u-form-item borderBottom :label="language.BecomingaHitchhiker.nma">
                                    <u--input :placeholder="language.BecomingaHitchhiker.nameplaceholder" :prefixIcon="usericon" v-model="username" @change="change"></u--input>
                                </u-form-item>
                                <u-form-item borderBottom :label="language.BecomingaHitchhiker.idc">
                                    <u--input :placeholder="language.BecomingaHitchhiker.idcordplaceholder" :prefixIcon="usericon" v-model="username" @change="change"></u--input>
                                </u-form-item>
                                <u-form-item borderBottom :label="language.BecomingaHitchhiker.idcPhoto">
                                    <view class="title acea-row row-between-wrapper">
                                        <view>上传凭证</view>
                                        <view class="tip">( 最多可上传3张 )</view>
                                    </view>
                                    <view class="upload acea-row row-middle">
                                       <!-- <view class="pictrue" v-for="(item, index) in applyPicUrls" :key="index">
                                            <image :src="item" />
                                            <view class="iconfont icon-guanbi1 font-color" @tap="DelPic(index)" />
                                        </view> -->
                                        <!-- <view class="pictrue acea-row row-center-wrapper row-column" @tap="uploadpic" v-if="applyPicUrls.length < 3">
                                            <text class="iconfont icon-icon25201" />
                                            <view>上传凭证</view>
                                        </view> -->
                                    </view>
                                </u-form-item>
                                <u-form-item borderBottom :label="language.BecomingaHitchhiker.kxnam">
                                    <u--input :placeholder="language.BecomingaHitchhiker.kxnamberplaceholder" :prefixIcon="usericon" v-model="username" @change="change"></u--input>
                                </u-form-item>
                                <u-form-item
                                    :label="language.BecomingaHitchhiker.jsztype"
                                    prop="userInfo.sex"
                                    borderBottom
                                    @click="
                                        showSex = true
                                        hideKeyboard()
                                    "
                                    ref="item1"
                                >
                                    <u--input
                                        v-model="username"
                                        disabled
                                        disabledColor="#ffffff"
                                        :placeholder="language.BecomingaHitchhiker.jsztypeplaceholder"
                                        border="none"
                                    ></u--input>
                                    <u-icon slot="right" name="arrow-right"></u-icon>
                                </u-form-item>
                                <u-form-item borderBottom :label="language.BecomingaHitchhiker.driverLicence">
                                    <u--input
                                        :placeholder="language.BecomingaHitchhiker.driverLicenceplaceholder"
                                        :prefixIcon="usericon"
                                        v-model="username"
                                        @change="change"
                                    ></u--input>
                                </u-form-item>
                                <view style="width: 100%; height: 50px; display: flex">
                                    <u-radio-group v-model="value">
                                        <u-radio labelColor="rgba(153, 153, 153, 1)" shape="square" :label="language.BecomingaHitchhiker.ridlab"></u-radio>
                                    </u-radio-group>
                                </view>
                                <view class="btndiv">
                                    <view><u-button :text="language.BecomingaHitchhiker.btn"></u-button></view>
                                </view>
                            </u--form>
                        </view>
                    </u-cell>
                </u-cell-group>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            language: {},
            showSex: 0
        }
    },
    onShow: function () {
        this.getlanguagedata()
        console.log('Personalcenter Show')
    },
    onLoad() {
        this.getlanguagedata()
    },
    mounted() {
        this.getlanguagedata()
    },
    methods: {
        getlanguagedata() {
            this.language = this.$store.getters['internationalization/getinternationalization']
        },
        uploadpic: function () {
            this.$util.uploadImageOne({}, (res) => {
                this.pics.push(res.data)
                this.$set(this, 'pics', this.pics)
            })
        },
        // 返回上一个页面
        navigateBack() {
            uni.navigateBack({
                delta: 1,
                success: () => {
                    // 返回成功后的回调函数
                },
                fail: () => {
                    // 返回失败后的回调函数
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.alldiv {
    width: 100vw;
    height: 100vh;
    //   这个是返回
    .navdiv {
        width: 100%;
        height: 10%;
        overflow: hidden;
        z-index: 999999;
    }
    .boxdiv {
        width: 95%;
        height: 53%;
        margin: auto;
        border-radius: 16px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.08);
    }
}
.btndiv {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
/deep/ uni-page-head .uni-page-head {
    position: fixed;
    left: var(--window-left);
    right: var(--window-right);
    height: 44px;
    height: calc(44px + constant(safe-area-inset-top));
    height: calc(44px + env(safe-area-inset-top));
    padding: 7px 3px;
    padding-top: calc(7px + constant(safe-area-inset-top));
    padding-top: calc(7px + env(safe-area-inset-top));
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    overflow: hidden;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    box-sizing: border-box;
    z-index: 998;
    color: #fff;
    background-color: #b03535 !important;
    -webkit-transition-property: all;
    transition-property: all;
}

/deep/ .u-input--radius[data-v-113bc24f],
.u-input--square[data-v-113bc24f] {
    border-radius: 1px;
    width: 100% !important;
}
/deep/ .u-border {
    border: none; /* 移除默认边框 */
    // border-bottom: 2px solid rgba(217, 219, 218, 1); /* 下边框样式和颜色 */
}
/deep/ .u-form-item__body__left {
    width: 90px !important;
}
/deep/ .u-form-item__body__left__content__label {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    color: rgba(153, 153, 153, 1);
    font-size: 14px;
}
/deep/ .u-input.u-input--square {
    background-color: rgba(0, 0, 0, 0) !important;
    border: none;
}
/deep/ .u-button--info {
    color: #ffffff;
    font-weight: bold;
    width: 100px !important;
    background-color: rgba(47, 212, 184, 1);
    border-color: #ebedf0;
    border-radius: 6px;
    font-size: 15px;
    border-width: 1px;
    border-style: solid;
}
</style>
